/**
 * Created by elikk on 2019/3/18.
 */
//该JS为扩展JS继承与jquerry 调用了echarts，highcharts 该JS无法单独使用
(function ($) {
    $.fn.cpuTop = function (option) {
        const defual = {  //网络设备CPU TOP10
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '5px',
                right: '20px',
                bottom: '10px',
                top: '0px',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    formatter: '{value}%',
                    color: '#c4c5c7'
                },
                splitLine: {
                    lineStyle: {
                        color: "#595a5c"
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['192.168.100.124', '20.2.0.26', '30.0.0.58', '192.168.0.114', '20.0.0.11', '20.1.1.124', '20.2.0.26', '30.0.0.58', '192.168.0.114', '20.0.0.11'],
                axisLabel: {
                    color: '#c4c5c7'
                },
                axisLine: {
                    lineStyle: {
                        color: "#595a5c"
                    }
                }
            },
            series: [
                {
                    name: 'CPU',
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#477de9'},
                                    {offset: 0.6, color: '#477de9'},
                                    {offset: 1, color: '#5ea2ff'}
                                ]
                            )
                        }
                    },
                    data: [50, 55, 60, 65, 70, 75, 80, 85, 90, 95]
                }
            ]
        };


        return this.each(function () {
            const self = $(this);
            let myChart = echarts.init(self[0]);
            myChart.clear();
            let options;

            if (option && option.dataPath) {
                $.getJSON(option.dataPath, function (data, status) {
                    if (status == "success") {
                        let newVal = {yAxis: {data: data[0]}, series: [{data: data[1]}]}
                        options = $.extend(true, defual, newVal);
                    }
                }).then(function () {
                    myChart.setOption(options);
                })
            } else {
                myChart.setOption(defual);
            }
        })
    };

    $.fn.cpuMemTop = function (option) {
        const html = `<div class="qx_chart_radio"></div>
                    <div class="qx_show_chart" style="width: 100%;height: 100%;"></div>`;

        let defual = {  ////网络设备CPU/MEM TOP5
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['CPU', 'MEM'],
                right: 10,
                top: 0,
                textStyle: {
                    color: '#c4c5c7'
                }
            },
            grid: {
                left: '5px',
                right: '20px',
                bottom: '10px',
                top: '30px',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    formatter: '{value}%',
                    color: '#c4c5c7'
                },
                splitLine: {
                    lineStyle: {
                        color: "#595a5c"
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['192.168.100.124', '20.2.0.26', '30.0.0.58', '192.168.0.114', '20.0.0.11'],
                axisLabel: {
                    color: '#c4c5c7'
                },
                axisLine: {
                    lineStyle: {
                        color: "#595a5c"
                    }
                }
            },
            series: [
                {
                    name: 'CPU',
                    type: 'bar',
                    barWidth: 8,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#477de9'},
                                    {offset: 0.6, color: '#477de9'},
                                    {offset: 1, color: '#5ea2ff'}
                                ]
                            )
                        }
                    },
                    data: [75, 80, 85, 90, 95]
                },
                {
                    name: 'MEM',
                    type: 'bar',
                    barWidth: 8,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#44a653'},
                                    {offset: 0.6, color: '#44a653'},
                                    {offset: 1, color: '#53d467'}
                                ]
                            )
                        }
                    },
                    data: [41, 42, 47, 52, 69]
                }
            ]
        };

        return this.each(function () {
            const self = $(this);
            self.empty().append(html);
            const optionDiv = self.find(".qx_chart_radio");
            const showDiv = self.find(".qx_show_chart");

            optionDiv.addClass("qx_cpuMem_px").append(`<input type="radio" name="top5" checked="checked" id="cputop" data-url="json/chart2.json">
            <label for="cputop">CPU</label>
            <input type="radio" name="top5" id="memtop" data-url="json/chart2.json">
            <label for="memtop">MEM</label>`);

            let myChart = echarts.init(showDiv[0]);
            myChart.clear();
            let options;

            if (option && option.dataPath) {
                $.getJSON(option.dataPath, function (data, status) {
                    if (status == "success") {
                        let newCArray = new Array();
                        let newMArray = new Array();
                        let nameArray = new Array();
                        for(item in data.data){
                            nameArray.push(item);
                            newCArray.push(data.data[item][0]);
                            newMArray.push(data.data[item][1]);
                        }
                        let newVal = {yAxis: {data: nameArray}, series: [{data: newCArray}, {data: newMArray}]}
                        options = $.extend(true, defual, newVal);
                    }
                }).then(function () {
                    myChart.setOption(options);
                })
            } else {
                myChart.setOption(defual);
            }

            optionDiv.on("click", '#cputop', function () {
                const url = $(this).data("url");
                $.getJSON(url, function (data, status) {
                    if (status == "success") {
                        defual.legend.data = ['CPU','MEM']
                        defual.series[0].name = "CPU";
                        defual.series[1].name = "MEM";
                        let newCArray = new Array();
                        let newMArray = new Array();
                        let nameArray = new Array();
                        for(item in data.data){
                            nameArray.push(item);
                            newCArray.push(data.data[item][0]);
                            newMArray.push(data.data[item][1]);
                        }
                        options.series[0].data = newCArray;
                        options.series[1].data = newMArray;
                    }
                }).then(function () {
                    myChart.clear();
                    myChart.setOption(options);
                });
            }).on("click", '#memtop', function () {
                const url = $(this).data("url");
                $.getJSON(url, function (data, status) {
                    if (status == "success") {
                        defual.legend.data = ['MEM', 'CPU'];
                        defual.series[0].name = "MEM";
                        defual.series[1].name = "CPU";
                        let newCArray = new Array();
                        let newMArray = new Array();
                        let nameArray = new Array();
                        for(item in data.data){
                            nameArray.push(item);
                            newCArray.push(data.data[item][0]);
                            newMArray.push(data.data[item][1]);
                        }
                        debugger;
                        options.series[0].data = newMArray;
                        options.series[1].data = newCArray;
                    }
                }).then(function () {
                    myChart.clear();
                    myChart.setOption(options);
                });
            })
        })
    };

    $.fn.rateTop = function (option) {
        const defual = {  //网络线路流量TOP10
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '5px',
                right: '20px',
                bottom: '0px',
                top: '10px',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    formatter: '{value}MB',
                    color: '#c4c5c7'
                },
                splitLine: {
                    lineStyle: {
                        color: "#595a5c"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#595a5c"
                    }
                }
            },
            xAxis: {
                type: 'category',
                data: ['192.168.100.124', '20.2.0.26', '30.0.0.58', '192.168.0.114', '20.0.0.11', '20.1.1.124', '20.2.0.26', '30.0.0.58', '192.168.0.114', '20.0.0.11'],
                axisLabel: {
                    interval: 0,//设置为0强制显示所有标签
                    rotate: 40,//旋转40°
                    color: '#c4c5c7'
                }
            },
            series: [
                {
                    name: 'CPU',
                    type: 'bar',
                    barWidth: 18,
                    data: [
                        {
                            value: 87,
                            itemStyle: {
                                normal: {
                                    color: "#477de9"
                                }
                            }
                        },
                        {
                            value: 80,
                            itemStyle: {
                                normal: {
                                    color: "#44a653"
                                }
                            }
                        },
                        {
                            value: 75,
                            itemStyle: {
                                normal: {
                                    color: "#651fff"
                                }
                            }
                        },
                        {
                            value: 69,
                            itemStyle: {
                                normal: {
                                    color: "#dfb533"
                                }
                            }
                        },
                        {
                            value: 63,
                            itemStyle: {
                                normal: {
                                    color: "#ff6827"
                                }
                            }
                        },
                        {
                            value: 54,
                            itemStyle: {
                                normal: {
                                    color: "#c92232"
                                }
                            }
                        },
                        {
                            value: 47,
                            itemStyle: {
                                normal: {
                                    color: "#626f8b"
                                }
                            }
                        },
                        {
                            value: 40,
                            itemStyle: {
                                normal: {
                                    color: "#ab4cc7"
                                }
                            }
                        },
                        {
                            value: 35,
                            itemStyle: {
                                normal: {
                                    color: "#22c9af"
                                }
                            }
                        },
                        {
                            value: 33,
                            itemStyle: {
                                normal: {
                                    color: "#c9225d"
                                }
                            }
                        }
                    ]
                }
            ]
        };

        return this.each(function () {
            const self = $(this);
            let myChart = echarts.init(self[0]);
            myChart.clear();
            let options;

            if (option && option.dataPath) {
                $.getJSON(option.dataPath, function (data, status) {
                    if (status == "success") {
                        let newArry = data[1].map(function (item, index) {
                            return {value: item};
                        })
                        let newVal = {xAxis: {data: data[0]}, series: [{data: newArry}]};
                        options = $.extend(true, defual, newVal);
                    }
                }).then(function () {
                    myChart.setOption(options);
                })
            } else {
                myChart.setOption(defual);
            }
        })
    };

    $.fn.healthy = function (option) {
		//网络健康趋势
        const defual = `<div class="qx_set_zdyblock ">
                                <div class="zjs_time">
                                    <label>选择类型：</label>
                                    <div class="qx_jkqs_ckeck">
                                        <label><input type="checkbox" name="hkqs" value="1" data-name="主机" data-image="icon_jk01" checked>主机</label>
                                        <label><input type="checkbox" name="hkqs" value="2" data-name="网络" data-image="icon_jk02" checked>网络</label>
                                        <label><input type="checkbox" name="hkqs" value="3" data-name="虚拟机" data-image="icon_jk03" checked>虚拟机</label>
                                        <label><input type="checkbox" name="hkqs" value="4" data-name="数据库" data-image="icon_jk04" checked>数据库</label>
                                        <label><input type="checkbox" name="hkqs" value="5" data-name="标准应用" data-image="icon_jk05" checked>标准应用</label>
                                        <label><input type="checkbox" name="hkqs" value="6" data-name="中间件" data-image="icon_jk06" checked>中间件</label>
                                    </div>
                                </div>
                                <div class="zjs_time mt15">
                                    <button  class="ybtna">确定</button>
                                    <button  class="ybtn">取消</button>
                                </div>
                            </div>`

        return this.each(function () {
            const self = $(this);
            self.empty().append(defual);

            let strings = `<ul class="qx_jkqs_chart w33p `;
            self.on("click", "input[name='hkqs']", function () {
                let num = self.find(":checked").length;
                if (num == 1) {
                    return false;
                }
            });

            self.off("click", ".ybtna");

            self.on("click", ".ybtna", function () {
                let num = self.find(":checked").length;
                switch (num) {
                    case 2:
                        strings += `two">`
                        break;
                    case 3:
                        strings += `three">`
                        break;
                    case 4:
                        strings += `four">`
                        break;
                    case 5:
                        strings += `five">`
                        break;
                    default:
                        strings += `">`;
                }


                if (option && option.dataPath) {
                    let dataVal = self.find(":checked").map(function () {
                        return {name: $(this).data('name'), image: $(this).data('image')};
                    })

                    $.getJSON(option.dataPath, dataVal, function (data, status) {
                        if (status == "success") {
                            data.forEach(function (item) {
                                debugger;
                                strings += `<li>
                                        <div class="qx_jkqs_chartlist ${item.type}">
                                            <div class="qx_jkqs_icon">
                                                <img src="images/qx/ksh_portal/${item.image}.png">
                                                <p>${item.name}</p>
                                                <span>${item.status}</span>
                                            </div>
                                            <div class="qx_jkqs_box"></div>
                                        </div>
                                    </li>`
                            })
                        }
                    }).then(function () {
                        self.empty().append(strings);
                    })
                } else {
                    self.find(":checked").each(function (index, item) {
                        let checkName = $(item).data('name');
                        let checkImage = $(item).data('image');
                        strings += `<li>
                                        <div class="qx_jkqs_chartlist jk_green">
                                            <div class="qx_jkqs_icon">
                                                <img src="images/qx/ksh_portal/${checkImage}.png">
                                                <p>${checkName}</p>
                                                <span>向好</span>
                                            </div>
                                            <div class="qx_jkqs_box"></div>
                                        </div>
                                    </li>`
                    });
                    strings += `</ul>`
                    self.empty().append(strings);
                }
            });

        })
    };

    $.fn.auto = function (option) {
        const defual = {//自动化图形
            chart: {
                type: 'bubble',
                zoomType: 'xy',
                backgroundColor: 'none',
                margin: [20, 20, 40, 50]
            },
            title: {
                text: null
            },
            xAxis: {
                title: {
                    text: null
                },
                labels: {
                    style: {
                        color: '#c4c5c7'
                    },
                    formatter: function () {
                        var date = new Date(this.value), m = date.getMonth() + 1, d = date.getDate();
                        m = m < 10 ? '0' + m : m;
                        d = d < 10 ? '0' + d : d;
                        return m + '-' + d;
                    }
                },
                gridLineColor: 'rgba(255,255,255,0.2)',
                gridLineWidth: 1,
                tickColor: 'rgba(255,255,255,0.2)',
                tickWidth: 0,
                tickLength: 0,
                lineWidth: 1,
                lineColor: 'rgba(255,255,255,0.2)'
            },
            yAxis: {
                title: {
                    text: null
                },
                gridLineColor: 'rgba(255,255,255,0.2)',
                lineWidth: 1,
                lineColor: 'rgba(255,255,255,0.2)',
                tickWidth: 1,
                tickLength: 5,
                tickColor: 'rgba(255,255,255,0.2)',
                labels: {
                    style: {
                        color: '#c4c5c7'
                    }
                },
                min: 0
            },
            colors: ['#44a653', '#dfb533'],
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                enabled: true
            },
            series: [
                {
                    "name": "数据列 1",
                    "data": [
                        [1493913600000, 36, 79],
                        [1494000000000, 74, 60],
                        [1494086400000, 76, 58],
                        [1494172800000, 87, 56],
                        [1494259200000, 27, 73],
                        [1494345600000, 90, 2000000],
                        [1494432000000, 93, 87],
                        [1494518400000, 69, 40],
                        [1494604800000, 23, 33],
                        [1494691200000, 86, 31]
                    ]
                },
                {
                    "name": "数据列 2",
                    "data": [
                        [1493913600000, 60, 1000000],
                        [1494000000000, 75, 59],
                        [1494086400000, 54, 8],
                        [1494172800000, 55, 93],
                        [1494259200000, 30, 58],
                        [1494345600000, 63, 44],
                        [1494432000000, 33, 17],
                        [1494518400000, 30, 56],
                        [1494604800000, 67, 48],
                        [1494691200000, 25, 81]
                    ]
                }
            ]
        }

        return this.each(function () {
            const self = $(this);
            self.highcharts(defual);
        })
    };

    $.fn.table = function (option) {
		//表格
        const defual = `<table cellpadding="0" class="qx_ksh_table">
                                    <thead>
                                    <tr class="qx_ksh_table_head">
                                        <th class="head"><span>管理分类</span></th>
                                        <th class="head"><span>管理数量</span></th>
                                        <th class="head"><span>不可用数量</span></th>
                                        <th class="head"><span>不可用占比</span></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1111</td>
                                        <td>1111</td>
                                        <td class="t_red">1111</td>
                                        <td>1111</td>
                                    </tr>
                                    <tr>
                                        <td>1111</td>
                                        <td>1111</td>
                                        <td class="t_red">1111</td>
                                        <td>1111</td>
                                    </tr>
                                    <tr>
                                        <td>1111</td>
                                        <td>1111</td>
                                        <td class="t_red">1111</td>
                                        <td>1111</td>
                                    </tr>
                                    <tr>
                                        <td>1111</td>
                                        <td>1111</td>
                                        <td class="t_red">1111</td>
                                        <td>1111</td>
                                    </tr>
                                    <tr>
                                        <td>1111</td>
                                        <td>1111</td>
                                        <td class="t_red">1111</td>
                                        <td>1111</td>
                                    </tr>
                                    </tbody>
                                </table>`;

        return this.each(function () {
            const self = $(this);
            self.empty().append(defual);
        })
    };

    $.fn.defined = function (option) {
		//自定义界面
        const defual = ` <div class="qx_set_zdyblock ">
                                    <div class="zjs_time">
                                        <label>面板名称：</label>
                                        <input type="text" class="title yinput w300">
                                    </div>
                                    <div class="zjs_time">
                                        <label>URL：</label>
                                        <input type="text" class="urlPath yinput w300">
                                    </div>
                                    <div class="zjs_time mt15 qx_zdy_panel">
                                        <button  class="ybtna">确定</button>
                                        <button  class="ybtn">取消</button>
                                    </div>
                                </div>
                                <iframe src="" class="qx_zdy_iframe none"></iframe>`;

        return this.each(function () {
            const self = $(this);
            self.empty().append(defual);

            self.off("click", ".ybtna");

            self.on("click", ".ybtna", function () {
                let title = self.find(".title").val();
                let url = self.find(".urlPath").val();
                self.closest("li").find(".qx_panel_title").text(title);
                self.find(".qx_zdy_iframe").removeClass("none").attr("src", url);
                self.find(".qx_set_zdyblock").addClass("none");
            })
        })
    };
})(jQuery);